<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="<?php echo base_url()?>uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="<?php echo base_url()?>uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>uploadify/swfobject.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>uploadify/jquery.uploadify.v2.1.4.min.js"></script>

<title>TOOLBAR <?php echo base_url();?></title>
<style type="text/css">
.inputs{
	width:150px;
	font-size:13px
}
.iselect{
	width:160px;
	font-size:13px
}

</style>
</head>
<body style="background-color:gray">
<div id="toolbar">
<a><img id="insert_link"src="<?php echo base_url()?>images/insert-link.png" style="height:50px;margin-right:20px"/></a>
<a onclick="addMap()" style="cursor:pointer"><img id="insert_link"src="<?php echo base_url()?>images/add-map.png" style="height:50px;margin-right:20px" /></a>

<input type="file" name="file_upload" id="file_upload" />
</div>
   
<script type="text/javascript">

$(document).ready(function() {
	$('#file_upload').uploadify({
          'buttonImg' : '<?php echo base_url()?>images/upload-file.png',
          'height'    :  50,
          'width'     :  50,
	  'uploader'  : '<?php echo base_url()?>uploadify/uploadify.swf',
	  'script'    : '<?php echo base_url()?>uploadify/uploadify.php',
	  'cancelImg' : '<?php echo base_url()?>uploadify/cancel.png',
	  'folder'    : 'uploads',
	  'auto'      : true,
	  'script'	  : '<?php echo base_url()?>toolbar/upload',
	  'onComplete': uploadComplete,
	  'sizeLimit'   : 10485760,
	  'onError'     : function (event,ID,fileObj,errorObj) {
      		alert(errorObj.type + ' Error: ' + errorObj.info+". Try Again Later");
    		}
	});
});

function uploadComplete(event, ID, fileObj, response, data) {
      //alert(response);
      document.getElementById("mydiv").innerHTML +=response;
      document.getElementById("mydiv").innerHTML +='<br /><a href="javascript:download('+response+')"> Download </a>';
}
function download(id){
	/*$.post('<?php echo base_url()?>toolbar/download', {id:id}, function(data) {
	var myframe=document.getElementById("iframy");
	//window.location.href=data;
	alert(data);
		var doc =myframe.document;
        if(myframe.contentDocument)
            doc = myframe.contentDocument; // For NS6
        else if(myframe.contentWindow)
            doc = myframe.contentWindow.document; // For IE5.5 and IE6
        // Put the content in the iframe
        //doc.open();
        //doc.writeln(data);
        //doc.close();
        //doc.write=data;

	});*/
	document.getElementById("iframy").src='<?php echo base_url()?>toolbar/download/'+id;
}
</script>

<script type="text/javascript">
var map;
var geocoder;
function addMap(){
	//alert("smth");
	document.getElementById("gmapsettings").style.display="block";
        loadScript();
}
function initialize() {
	var width=parseInt(document.getElementById("gmap_width").value);
	var height=parseInt(document.getElementById("gmap_height").value);
	var zoom=parseInt(document.getElementById("gmap_zoom").value);
	var overview=document.getElementById("gmap_overview").checked;
	var scale=document.getElementById("gmap_scale").checked;
	var marker=document.getElementById("gmap_marker").checked;
	var lng=parseFloat(document.getElementById("gmap_lng").value);
	var lat=parseFloat(document.getElementById("gmap_lat").value);
	//alert(width+'-'+height+'-'+zoom+'-'+overview+'-'+scale+'-'+marker+'-'+lng+'-'+lat);
	
	document.getElementById("mapDiv").style.width=width;
	document.getElementById("mapDiv").style.height=height;
	var myLatlng = new google.maps.LatLng(lat, lng);
	//var overviewoptions= new google.maps.OverviewMapControlOptions({opened:true});
	var overviewoptions= {opened:true};
	var myOptions = {
		zoom: zoom,
		center: myLatlng,
		overviewMapControl:overview,
		overviewMapControlOptions:overviewoptions,
		scaleControl:scale,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	if(map='undefined'){
		map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
		geocoder = new google.maps.Geocoder();
		google.maps.event.addListener(map, 'mousedown', function(event) {
			var myLatLng = event.latLng;
			document.getElementById("gmap_lat").value = myLatLng.lat();
			document.getElementById("gmap_lng").value = myLatLng.lng();
		});
		if(marker){
			var mymarker = new google.maps.Marker({
	          position: map.getCenter(),
	          map: map
	        });
		}
	}
	else{
		map.setOptions(myOptions);
		if(marker){
			var mymarker = new google.maps.Marker({position: map.getCenter(),	map: map});
		}
	}
	
	
}
  
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}

function getAddress(){
	var address= document.getElementById("gmap_address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        document.getElementById("gmap_lng").value=results[0].geometry.location.lng();
        document.getElementById("gmap_lat").value=results[0].geometry.location.lat();
      } else {
        alert("Error, Try Again Later ");
      }
    });	
}
function add(){
	var width=parseInt(document.getElementById("gmap_width").value);
	var height=parseInt(document.getElementById("gmap_height").value);
	var zoom=parseInt(document.getElementById("gmap_zoom").value);
	var overview=document.getElementById("gmap_overview").checked;
	var scale=document.getElementById("gmap_scale").checked;
	var marker=document.getElementById("gmap_marker").checked;
	var lng=parseFloat(document.getElementById("gmap_lng").value);
	var lat=parseFloat(document.getElementById("gmap_lat").value);


	var myframe=document.createElement("iframe");
	//myframe.frameborder=0;
	myframe.style.width=width+"px";
	myframe.style.height=height+"px";
	
	var myhtml=document.createElement("html");
	var mapdiv=document.createElement("div");
	mapdiv.id="mapdiv";
	mapdiv.style.width=width+"px";
	mapdiv.style.height=height+"px";
	myhtml.innerHTML=mapdiv.outerHTML;
	myframe.appendChild(myhtml);
        document.getElementById("mydiv").appendChild(myframe);
	//alert(myframe.innerHTML);
	var initialize=document.createElement("script");
	initialize.type = "text/javascript";
	initialize.innerText="function initialize(){ var map = new google.maps.Map(document.getElementById('mapdiv'),"+
            "{zoom:"+ zoom+",center: new google.maps.LatLng("+lat+","+ lng+"),overviewMapControl:"+overview +",overviewMapControlOptions:"+
            "{opened:true},scaleControl:"+scale +",mapTypeId: google.maps.MapTypeId.ROADMAP}"+
            ");"+
	"if("+marker+"){ marker = new google.maps.Marker({position: map.getCenter(),	map: map});}"
	+"}";
	
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
        myhtml.innerHTML +=script.outerHTML;
        myhtml.innerHTML +=initialize.outerHTML;
        //alert(myframe.innerHTML);
	//myframe.appendChild(script);
	//myframe.appendChild(initialize);
        myframe.scrolling="no";
        myframe.frameborder="0";
        myframe.attributes.frameborder="0";
        var doc =myframe.document;
        if(myframe.contentDocument)
            doc = myframe.contentDocument; // For NS6
        else if(myframe.contentWindow)
            doc = myframe.contentWindow.document; // For IE5.5 and IE6
        // Put the content in the iframe
        doc.open();
        doc.writeln(myhtml.outerHTML);
        doc.close();
	//document.body.appendChild(myframe);
	document.getElementById("gmapsettings").style.display="none";
}
//window.onload = loadScript;
</script>

<div id="gmapsettings" align="center" style="background-color:#66FF99;min-width:800px;margin:auto;border:2px black dotted; display:none">
	<table>
	<tr>
	<td>
		<div id="mapDiv" style="width:500px;height:400px;"></div>
	</td>
	<td>
	<table>
		<tr>
		<td><b>Address</b><br/><input id="gmap_address" type="text" class="inputs" onchange="getAddress()" /></td></tr>
		<tr><td><b>Width</b><br/><input id="gmap_width" type="text" class="inputs" value="500" /></td></tr>
		<tr><td><b>Height</b><br/><input id="gmap_height" type="text" class="inputs" value="400" /></td></tr>
		<tr><td><b>Zoom</b><br/><select id="gmap_zoom"  ><option value="1">1 (Far)</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8" >8</option><option value="9">9</option><option value="10">10</option><option value="11" selected="selected">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15" >15</option><option value="16">16</option><option value="17">17 (Close)</option></select></td></tr>
		
		<tr><td><input id="gmap_overview" type="checkbox"  /><b>Show Overview</b></td></tr>
		<tr><td><input id="gmap_scale" type="checkbox" /><b>Show Scale</b></td></tr>
		<tr><td><input id="gmap_marker" type="checkbox" /><b>Show Marker</b></td></tr>
		<tr><td><b>Longitude</b><br/><input id="gmap_lng" type="text" value="50.107" /></td></tr>
		<tr><td><b>Latitude</b><br/><input id="gmap_lat" type="text" value="26.376" /></td></tr>
		<tr><td  align="center"><input type="button" value="preview" onclick="loadScript()" style="border:0;width:90px;height:30px;margin-right:5px;" />
			<input type="button" value="Add" onclick="add()" style="border:0;width:90px;height:30px" /></td></tr>
	</table>
	</td>
	</tr>
		
	</table>
	

</div>
<div id="uploadDiv">



</div>
<div id="mydiv">
<a href="javascript:download(34)">Download</a>
</div>
<iframe id="iframy" style="display:none"></iframe>
</body>

</html>
